<!--
 * @Description:
 * @Author: FangYaoTang
 * @Date: 2023-08-16 09:19:00
 * @LastEditor: FangYaoTang
 * @LastEditTime: 2023-08-16 09:19:00
 * @Copyright: by 南京桓羽信息科技有限公司 禁止任何形式（包含二次开发）转售系统源码，违者必究。
-->

<template>
  <view class="page_content">
    <view class="head_content">
      <CustomNavbar title="Integral" color="#fff" bg="#241e42"></CustomNavbar>
    </view>
    <view class="main_content">
      <scroll-view class="scroll_view" :scroll-y="true" @scrolltolower="scrollBottom">
        <view class="scroll_content">
					 <!-- :style="'background:' + isBgColor" -->
          <view class="top_card">
            <view class="left">
              <view class="line1">
                <image
                  class="image"
                  src="https://img.nymaite.com/video_short/icons/integral.png"
                  mode="widthFix"
                ></image>
                <text class="text">Current points</text>
              </view>
              <view class="line2">{{ userInfo.score || 0 }}</view>
            </view>
            <view class="right" @click="recharge" v-if="iosIsPay">Recharge</view>
          </view>
          <view class="content_box">
            <view class="title">Points details</view>
            <view class="list_box" v-if="list.length">
              <view class="item" v-for="(item, index) in list" :key="index">
                <view class="left">
                  <view class="line">
                    <view>{{ item.type_name || '追剧' }}</view>
                    <view>{{ item.createTime }}</view>
                  </view>
                </view>
                <view class="right">
                  <view class="line">
                    <view class="E64643">{{ item.totalFee }} integral</view>
                  </view>
                </view>

                <!-- <view class="line">
                  <text>{{ item.type_name || '追剧' }}</text>
                  <text>{{ item.totalFee }}积分</text>
                </view>
                <view class="line">
                  <text>备注：{{ item.memo }}</text>
                  <text>{{ item.createTime }}</text>
                </view> -->
              </view>
            </view>
            <view class="be_empty" v-else>No points information</view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  data() {
    return {
      isBgColor: getApp().globalData.isBgColor,
      list: [],
      page: 1
    }
  },
  computed: {
    ...mapGetters('user', ['userInfo']),
    ...mapGetters('app', ['iosIsPay'])
  },
  watch: {},
  onLoad() {},
  onShow() {
    this.integralList()
    this.list = []
    this.page = 1
  },
  methods: {
    scrollBottom() {
      this.page++
      this.integralList()
    },
    integralList() {
      this.$request('order.list', {
        wallet_type: 'usable',
        current: this.page
      }).then(res => {
        if (res.data.records && res.data.records.length) {
          this.list = this.list.concat(res.data.records)
        } else {
          this.page--
        }
      })
    },
    recharge() {
      // #ifdef H5
      if (!this.iosIsPay) return this.jumpView('/pages/user/info/contact')
      // #endif
      this.jumpView('/pages/user/integral/recharge')
    }
  }
}
</script>

<style>
	page {
	  background-color: white;
	  min-height: 100vh;
	}
</style>
<style lang="scss" scoped>
.space-between{
	display: flex;
	justify-content: space-between;
}
.page_content {
	background: #241e42;
  .main_content {
    overflow: hidden;

    .scroll_view {
      height: 100%;

      .scroll_content {
        padding: 24rpx 40rpx 60rpx 40rpx;
      }
    }

    .top_card {
      height: 400rpx;
			width: 100%;
      min-height: 220rpx;
      border-radius: 16rpx;
      background-image: url('../../../static/images/vip_card.png'); 
			background-size: contain;
			background-repeat: no-repeat;
      position: relative;
      padding: 50rpx 40rpx;
			.vipExpiretime{
				font-size: 28rpx;
				color: white;
				padding-bottom: 30rpx;
			}
      &::before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-image: url('https://img.nymaite.com/video_short/images/texture.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }

      .left {
        position: relative;
        color: #fff;

        .line1 {
          display: flex;
          align-items: center;

          .image {
            width: 32rpx;
            margin-right: 8rpx;
          }

          .text {
            font-size: 36rpx;
          }
        }

        .line2 {
          font-size: 40rpx;
          font-weight: 900;
          margin-top: 20rpx;
        }
      }

      .right {
        position: relative;
				height: 64rpx;
				padding: 12rpx 45rpx;
        text-align: center;
        border-radius: 8rpx;
        background: #fff;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
				background: #243740;
				border-radius: 10rpx;
				margin: 20rpx 0 0;
      }
    }

    .content_box {
      margin-top: 40rpx;
			background: #243740;
			border-radius: 20rpx;
			padding: 52rpx 30rpx;
      .title {
        font-size: 36rpx;
        font-weight: 700;
        color: #fff;
      }

      .list_box {
        .item {
          padding: 32rpx 0;
          border-bottom: 2rpx solid rgba(240, 240, 240, 1);
          display: flex;
          justify-content: space-between;
          align-items: center;
          .line {
            // display: flex;
            // align-items: center;
            // justify-content: space-between;
            
            font-weight: 400;
            font-size: 24rpx;
            color: #FFFFFF;
            line-height: 52rpx;

            .bold {
              font-size: 32rpx;
              font-weight: 700;
            }
            .E64643{
              color: #E64643;
            }
          }
        }
      }

      .be_empty {
        font-size: 28rpx;
        color: #999;
        text-align: center;
        padding: 40rpx 0;
      }
    }
  }
}
</style>
